import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import LocationOn from "@material-ui/icons/LocationOn";
import Phone from "@material-ui/icons/Phone";
import { Button, Card, List } from "antd";
import QueueAnim from "rc-queue-anim";
import * as React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { bindActionCreators } from "redux";
import image from "../../images/hospital1.jpg";
import { getHispitalList } from "../../redux/action/ActionsForSaga";
import { HospitalInfo } from "../../type/HospitalData";

const styles = (theme: Theme) =>
  createStyles({
    root: {
      marginTop: "20px"
    },
    hosImage: {
      width: "120px",
      height: "120px",
      borderRadius: "5px"
    },
    hosGrade: {
      fontSize: "4px",
      marginRight: "10px",
      backgroundColor: "rgb(254,244,215)",
      color: "rgb(254,144,9)",
      borderRadius: "5px",
      padding: "3px"
    },
    message: {
      marginTop: "15px"
    },
    cardRight: {
      float: "right",
      textAlign: "center",
      "& button": {
        backgroundColor: "rgb(254,192,9)",
        color: "rgb(255,255,255)"
      },
      "& div": {
        marginTop: "10px"
      },
      "& div a": {
        color: "#666666"
      }
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  hospitalList: HospitalInfo[];
  getData: any;
  loadParent: any;
}
/**
 * 医院列表的医院信息卡片
 */
class HospitalList extends React.Component<Iprops> {
  public componentWillMount() {
    this.props.getData({
      filterOne: null,
      filterTwo: null,
      searchParam: null
    });
  }
  public componentDidMount() {
    this.props.loadParent(this);
  }
  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <QueueAnim>
          <List
            dataSource={this.props.hospitalList}
            grid={{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 2, xl: 2, xxl: 2 }}
            size={"large"}
            itemLayout={"vertical"}
            pagination={{
              pageSize: 8,
              hideOnSinglePage: true,
              showTotal: total => `共 ${total} 家医院`
            }}
            split={true}
            renderItem={(item: HospitalInfo) => (
              <List.Item>
                <Card hoverable={true}>
                  <Card.Meta
                    avatar={
                      <Link
                        to={{
                          pathname: `/choose-doctor/${item.id}`
                        }}
                      >
                        <img src={image} className={classes.hosImage} />
                      </Link>
                    }
                    title={item.name}
                    description={
                      <div>
                        <div style={{ display: "inline-block" }}>
                          <span className={classes.hosGrade}>
                            {item.level}
                            {item.category}
                          </span>
                          <span className={classes.hosGrade}>{"综合医院"}</span>
                          <div className={classes.message}>
                            {item.phone ? (
                              <span>
                                <Phone fontSize={"small"} />
                                <span style={{ paddingLeft: "8px" }}>
                                  {item.phone}
                                </span>
                              </span>
                            ) : (
                              ""
                            )}
                            <br />
                            <LocationOn fontSize={"small"} />
                            <span style={{ paddingLeft: "8px" }}>
                              {item.location}
                            </span>
                          </div>
                        </div>
                        <div className={classes.cardRight}>
                          <Link
                            to={{
                              pathname: `/choose-doctor/${item.id}`
                            }}
                          >
                            <Button>去挂号</Button>
                          </Link>
                          <div>
                            <Link to={`/estimate-hospital/${item.id}`}>
                              查看评价
                            </Link>
                          </div>
                        </div>
                      </div>
                    }
                  />
                </Card>
              </List.Item>
            )}
          />
        </QueueAnim>
      </div>
    );
  }
}
/**
 * 将stroe的数据绑定到组件的props上
 */
const mapStateToProps = (state: any) => {
  return {
    hospitalList: state
      .get("hospitalReducer")
      .get("hospitalList")
      .toJS()
  };
};
/**
 * 将action绑定在组件的props上
 */
const mapDispatchToProps = ({} = (dispatch: any, ownProps: any) => {
  /**
   * 等同于 {
   * getData: (hospitalList: HospitalInfo[]) =>
   *  dispatch(setHispitalList(hospitalList))
   * }
   */
  return bindActionCreators(
    {
      getData: getHispitalList
    },
    dispatch
  );
});
/**
 *  用react-redux的connect 将组件和redux连接起来
 */
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(HospitalList));
